<template>
  <div>
    <Layout>
      <div class="loading flex grow column" v-show="toLoading || toMore">
        <Loading v-show="toLoading" size="24px" vertical>加载中...</Loading>
        <img :src="PIC_URL + '/tlbypcWeb/wushuju.png'" v-show="toMore" alt="" />
      </div>
      <div class="wrap flex" v-show="!toLoading && !toMore">
        <div class="RadarX flex grow">
          <Radar></Radar>
        </div>
        <div class="aboutinfo flex grow">
          <div class="infoBox">
            <div class="infoWrap">
              <div class="headers flex">
                <div class="hdline">潜伏理由</div>
                <!-- 搜索 -->
                <div>
                  <div class="seek" @click="searchFn" v-if="!searchInp">
                    <i class="icon"></i>
                  </div>
                  <div class="searchBox" v-if="searchInp">
                    <el-autocomplete
                      v-model="state"
                      :hide-loading="true"
                      :fetch-suggestions="querySearchAsync"
                      placeholder="请输入内容"
                      @select="handleSelect"
                      popper-class="popperCss"
                    >
                      <i
                        class="el-icon-search el-input__icon"
                        slot="suffix"
                        @click="selectOne"
                      >
                      </i>
                    </el-autocomplete>
                  </div>
                </div>
              </div>
              <div class="infoTxt">
                <span class="square square1"></span>
                <span class="square square2"></span>
                <span class="square square3"></span>
                <span class="square square4"></span>
                <p class="actierTitle">{{ articleDetail.title }}</p>
                <p class="Time">{{ articleDetail.time | timeFn }}</p>
                <p class="txt">{{ articleDetail.articleAbstract }}</p>
                <p class="btn" @click="showStatus = true"></p>
              </div>
              <div class="hdline">相关板块</div>
              <div class="plate">
                <span class="square square1"></span>
                <span class="square square2"></span>
                <span class="square square3"></span>
                <span class="square square4"></span>
                <div class="box">
                  <table v-if="plateStock.length > 0">
                    <thead>
                      <tr>
                        <td width="20%">代码</td>
                        <td width="20%">板块名称</td>
                        <td width="20%">最新</td>
                        <td width="20%">成交量</td>
                        <td width="20%">成交额</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr
                        v-for="item in plateStock"
                        :key="item.id"
                        @click="
                          stockDetail({ stockCode: item.stockCode, block: 8 })
                        "
                      >
                        <td>{{ item.stockCode.match(/\d{6}/)[0] }}</td>
                        <td>{{ item.stockName }}</td>
                        <td>{{ item.current }}</td>
                        <td>{{ item.rise + "手" }}</td>
                        <td>{{ item.toUp }}</td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="noMore" v-if="plateStock.length == 0">
                    暂无数据
                  </div>
                </div>
              </div>
              <div class="hdline">相关个股</div>
              <div class="stock">
                <span class="square square1"></span>
                <span class="square square2"></span>
                <span class="square square3"></span>
                <span class="square square4"></span>
                <div class="box">
                  <table v-if="relationStock.length > 0">
                    <thead>
                      <tr>
                        <td width="20%">代码</td>
                        <td width="20%">个股名称</td>
                        <td width="20%">最新</td>
                        <td width="20%">成交量</td>
                        <td width="20%">主力净流入</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr
                        v-for="item in relationStock"
                        :key="item.id"
                        @click="stockDetail({ stockCode: item.stockCode })"
                      >
                        <td>{{ item.stockCode.match(/\d{6}/)[0] }}</td>
                        <td>{{ item.stockName }}</td>
                        <td>{{ item.current }}</td>
                        <td>{{ item.rise + "手" }}</td>
                        <td>{{ item.netTurnover }}</td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="noMore" v-if="relationStock.length == 0">
                    暂无数据
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="popup flex" v-show="showStatus">
        <ArticleDetail v-show="showStatus" v-bind:visible.sync="showStatus">
          <div class="title">{{ articleDetail.title }}</div>
          <div class="time">{{ articleDetail.time }}</div>
          <div
            class="txt"
            @click="viewImg($event)"
            v-html="articleDetail.detail"
          ></div>
        </ArticleDetail>
      </div>
      <openImg v-bind:imgSrc.sync="imgSrc"></openImg>

      <!--搜索二次弹框 -->
      <div class="popup flex" v-show="showStatus2">
        <ArticleDetail v-show="showStatus2" v-bind:visible.sync="showStatus2">
          <div class="title">{{ articleDetail2.title }}</div>
          <div class="time">{{ articleDetail2.time }}</div>
          <div
            class="txt"
            @click="viewImg($event)"
            v-html="articleDetail2.detail"
          ></div>
        </ArticleDetail>
      </div>
    </Layout>

    <!-- 搜索弹框 -->
    <div class="popup seachBg flex" v-show="searchShow">
      <div class="searchPop flex">
        <div class="icon-close" @click="closeFn"></div>
        <span class="square square1"></span>
        <span class="square square2"></span>
        <span class="square square3"></span>
        <span class="square square4"></span>
        <div class="infoWrap">
          <div class="hdline">潜伏理由</div>
          <div class="infoTxt">
            <span class="square square1"></span>
            <span class="square square2"></span>
            <span class="square square3"></span>
            <span class="square square4"></span>
            <p class="actierTitle">{{ articleDetail2.title }}</p>
            <p class="Time">{{ articleDetail2.time | timeFn }}</p>
            <p class="txt">{{ articleDetail2.articleAbstract }}</p>
            <p class="btn" @click="showStatus2 = true"></p>
          </div>
          <div class="hdline">相关板块</div>
          <div class="plate">
            <span class="square square1"></span>
            <span class="square square2"></span>
            <span class="square square3"></span>
            <span class="square square4"></span>
            <div class="box">
              <table v-if="plateStock2.length > 0">
                <thead>
                  <tr>
                    <td width="20%">代码</td>
                    <td width="20%">板块名称</td>
                    <td width="20%">最新</td>
                    <td width="20%">成交量</td>
                    <td width="20%">成交额</td>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="item in plateStock2"
                    :key="item.id"
                    @click="
                      stockDetail({ stockCode: item.stockCode, block: 8 })
                    "
                  >
                    <td>{{ item.stockCode.match(/\d{6}/)[0] }}</td>
                    <td>{{ item.stockName }}</td>
                    <td>{{ item.current }}</td>
                    <td>{{ item.rise + "手" }}</td>
                    <td>{{ item.toUp }}</td>
                  </tr>
                </tbody>
              </table>
              <div class="noMore" v-if="plateStock2.length == 0">暂无数据</div>
            </div>
          </div>
          <div class="hdline">相关个股</div>
          <div class="stock">
            <span class="square square1"></span>
            <span class="square square2"></span>
            <span class="square square3"></span>
            <span class="square square4"></span>
            <div class="box">
              <table v-if="relationStock2.length > 0">
                <thead>
                  <tr>
                    <td width="20%">代码</td>
                    <td width="20%">个股名称</td>
                    <td width="20%">最新</td>
                    <td width="20%">成交量</td>
                    <td width="20%">主力净流入</td>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="item in relationStock2"
                    :key="item.id"
                    @click="stockDetail({ stockCode: item.stockCode })"
                  >
                    <td>{{ item.stockCode.match(/\d{6}/)[0] }}</td>
                    <td>{{ item.stockName }}</td>
                    <td>{{ item.current }}</td>
                    <td>{{ item.rise + "手" }}</td>
                    <td>{{ item.netTurnover }}</td>
                  </tr>
                </tbody>
              </table>
              <div class="noMore" v-if="relationStock2.length == 0">
                暂无数据
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Loading } from "vant";
import Radar from "./Radar/Radar";
import RadarMain from "./Radar/index";
import ArticleDetail from "@/component/ArticleDetail";
import { select } from "d3-selection";
import Layout from "@/component/Layout";
import Container from "@/component/Container";
import openImg from "@/component/openImg";
import { imgPath } from "../../script/fn";
import {
  queryArticleStock,
  userClickUpdate,
  queryArticleList,
} from "../../api/api";
import behavior from "@/utils/behavior";
import stockPush from "../../script/stockPush";

import { getUrlParams, isOneMinu, stockMarker } from "../../script/fn";

import dayjs from "dayjs";
const userData = { ...behavior };

export default {
  components: { Layout, Loading, Radar, ArticleDetail, openImg },
  data() {
    return {
      title: "",
      restaurants: [],
      state: "",
      timeout: null,
      searchInp: false, //搜索
      searchShow: false, //搜索
      relationStock: [],
      plateStock: [],
      articleList: [],
      articleType: "", //相关股票
      articleDetail: {
        title: "",
        detail: "",
        time: "",
        articleAbstract: "",
        articleId: "",
      },
      // 搜索
      articleDetail2: {
        title: "",
        detail: "",
        time: "",
        articleAbstract: "",
        articleId: "",
      },
      relationStock2: [],
      plateStock2: [],

      toLoading: true,
      toMore: false,
      showStatus: false,
      showStatus2: false,
      imgSrc: "",
      limit: 10,
    };
  },

  async mounted() {
    await this.queryArticleType();
    this.queryArticleList();
  },
  filters: {
    timeFn(val) {
      return dayjs(val).format("YYYY-MM-DD");
    },
  },
  methods: {
    async userClick() {
      const { token } = getUrlParams();
      let openTime = localStorage.getItem("openTime") || 1;
      if (openTime == null) {
        localStorage.setItem("openTime", "1");
      } else {
        localStorage.setItem("openTime", ++openTime);
      }
      userData.module.moduleCode = "0006";
      userData.user.token = token;
      userData.event[0].eventSubject.starttime = Date.now();
      userData.event[0].eventSubject.endtime = "";
      userData.event[0].eventCode = "00029";
      userData.event[0].eventSubject.objectkey = this.articleDetail.articleId;
      userData.event[0].eventSubject.extend.openTime = openTime;
      if (!isOneMinu()) return;
      await userClickUpdate(userData).then((back) => {});
    },
    async queryArticleType() {
      await queryArticleStock({
        productId:
          getUrlParams().productId || localStorage.getItem("productId"),
      }).then((back) => {
        if (back.status == 1) {
          this.articleType = back.data;
        }
      });
    },
    async queryArticleList() {
      const current = this.articleType.find(
        (item) => item.articleTypeName == "机会潜伏"
      );
      if (!current) {
        console.warn("未查询到机会潜伏类型");
        return;
      }
      await queryArticleList({
        articleType: current.articleTypeId,
        title: "",
        limit: this.limit,
      }).then((data) => {
        if (data.status == 1) {
          this.toLoading = false;
          if (data.data.length == 0) return (this.toMore = true);
          let list = [];
          this.articleList = data.data.map((item, i) => {
            list.push({
              value: item.articleTitle,
              id: item.articleId,
            });
            item.formatTime = dayjs(item.createTime).format("YYYY-MM-DD HH:mm");
            (item.name = item.articleTitle), (item.index = i);
            this.restaurants = list;
            return item;
          });
          const self = this;
          //雷达数据
          RadarMain(this.articleList, function (d) {
            self.showDetail(d);
            select("#box").selectAll(".group").classed("tagActive", false);
            select(this).classed("tagActive", true);
          });
          this.showDetail(data.data[0]);
        }
      });
    },
    getCodes(stock) {
      return stock
        .map((it) => {
          const match = it.stockCode.match(/\d{6}/);
          return match ? match[0] : "";
        })
        .join(",")
        .split(",");
    },
    stockDetail({ stockCode, block }) {
      stockMarker(stockCode, "机会潜伏", block);
    },
    //查看图片
    viewImg(e) {
      if (e.path[0].tagName == "IMG") {
        this.imgSrc = e.path[0].src;
      }
    },
    showDetail(data) {
      this.relationStock = [];
      this.plateStock = [];
      let {
        articleTitle,
        articleAbstract,
        articleContent,
        relationStock,
        plateStock,
        createTime,
        articleId,
      } = data;
      this.articleDetail.title = articleTitle;
      this.articleDetail.time = dayjs(createTime).format("YYYY-MM-DD HH:mm");
      this.articleDetail.articleAbstract = articleAbstract;
      this.articleDetail.detail = imgPath(articleContent);
      this.articleDetail.articleId = articleId;
      //查询股票
      if (relationStock.length > 0) {
        stockPush({
          id: "relationStock",
          source: relationStock,
          codes: this.getCodes(relationStock),
          callback: ({ id, value }) => {
            if (id == "relationStock") {
              this[id] = value;
            }
          },
        });
      }
      //查询板块
      if (plateStock.length > 0) {
        stockPush({
          id: "plateStock",
          source: plateStock.length > 6 ? plateStock.substr(3, 9) : plateStock,
          codes: this.getCodes(
            plateStock.length > 6 ? plateStock.substr(3, 9) : plateStock
          ),
          callback: ({ id, value }) => {
            if (id == "plateStock") {
              this[id] = value;
            }
          },
        });
      }
      this.userClick();
    },
    // 搜索
    searchFn() {
      this.searchInp = true;
    },
    // 关闭弹框
    closeFn() {
      this.searchShow = false;
      this.state = "";
      this.relationStock2 = [];
      this.plateStock2 = [];
    },
    // 搜索数据
    async searchList(title) {
      const current = this.articleType.find(
        (item) => item.articleTypeName == "机会潜伏"
      );
      if (!current) {
        console.warn("未查询到机会潜伏类型");
        return;
      }
      await queryArticleList({
        articleType: current.articleTypeId,
        title: title,
      }).then((data) => {
        if (data.status == 1) {
          this.toLoading = false;
          if (data.data.length == 0) return (this.toMore = true);
          this.showDetail2(data.data[0]);
        }
      });
    },

    // todo 4/30  个股板块
    getCodes2(stock) {
      return stock
        .map((it) => {
          const match = it.stockCode.match(/\d{6}/);
          return match ? match[0] : "";
        })
        .join(",")
        .split(",");
    },

    showDetail2(data) {
      let {
        articleTitle,
        articleAbstract,
        articleContent,
        relationStock,
        plateStock,
        createTime,
        articleId,
      } = data;
      //搜索 todo
      this.articleDetail2.time = dayjs(createTime).format("YYYY-MM-DD HH:mm");
      this.articleDetail2.articleAbstract = articleAbstract;
      this.articleDetail2.title = articleTitle;
      this.articleDetail2.detail = imgPath(articleContent);
      this.articleDetail2.articleId = articleId;
      //查询股票
      if (relationStock.length > 0) {
        stockPush({
          id: "relationStock2",
          source: relationStock,
          codes: this.getCodes2(relationStock),
          callback: ({ id, value }) => {
            if (id == "relationStock2") {
              this[id] = value;
            }
          },
        });
      }
      //查询板块
      if (plateStock.length > 0) {
        stockPush({
          id: "plateStock2", //对比标识
          source: plateStock.length > 6 ? plateStock.substr(3, 9) : plateStock,
          codes: this.getCodes2(
            plateStock.length > 6 ? plateStock.substr(3, 9) : plateStock
          ), //客户端取数据
          callback: ({ id, value }) => {
            if (id == "plateStock2") {
              this[id] = value;
            }
          },
        });
      }
      // this.userClick();
    },
    // todo end
    selectOne() {
      this.searchShow = true;
      // this.searchList(this.title);
      this.searchList(this.state);
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 300 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        if (state.value)
          return (
            state.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1
          );
      };
    },
    handleSelect(item) {
      this.title = item.value;
      this.searchList(item.value);
      this.searchShow = true;
    },
  },
};
</script>
<style>
#contentsbar {
  justify-content: center;
}
.txt p {
  background: transparent !important;
  font-size: 16px !important;
  color: #3bacdb !important;
  line-height: 24px !important;
}
</style>
<style scoped lang="scss">
.loading {
  justify-content: center;
  align-items: center;
  img {
    margin: 30% auto;
  }
}
.popup {
  position: fixed;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 5;
}
.wrap {
  min-width: 1299px;
  max-width: 1299px;
}
.RadarX {
  align-items: center;
  word-break: break-all;
}
.aboutinfo {
  align-items: center;
  margin-left: -56px;
  min-width: 750px;

  .infoBox {
    width: 750px;
    height: 724px;
    background: url($PIC_URL + "/tlbypcWeb/qianfu/youce_bg.png") no-repeat
      center;
    box-sizing: border-box;
    padding: 33px 0 0 85px;
    .infoWrap {
      height: 650px;
      padding-right: 23px;
      overflow-y: auto;
      clear: both;
      .headers {
        justify-content: space-between;
        .hdline {
          width: 128px;
          height: 44px;
          line-height: 44px;
          text-align: center;
          background: url($PIC_URL + "/tlbypcWeb/qianfu/title_bg.png") no-repeat
            center;
          font-size: 20px;
          color: #3bacdb;
          font-weight: bold;
        }
        // 0416 搜索
        .seek {
          width: 45px;
          height: 45px;
          background: #03051f;
          border: 1px solid #0f264e;
          border-radius: 23px;
          text-align: center;
          cursor: pointer;
          .icon {
            display: inline-block;
            width: 27px;
            height: 29px;
            margin: 8px 0;
            background: url($PIC_URL + "/tlbypcWeb/qianfu/search.png") no-repeat
              top center;
            background-size: 100% 100%;
            box-sizing: border-box;
          }
        }
        .searchBox {
          width: 220px;
          position: relative;
          top: 0;
          // left: 0;
        }
      }

      .square {
        position: absolute;
        display: inline-block;
        width: 11px;
        height: 11px;
        &.square1 {
          background: url($PIC_URL + "/tlbypcWeb/qianfu/4_1.png") no-repeat left
            top;
          left: 0;
          top: 0;
        }
        &.square2 {
          background: url($PIC_URL + "/tlbypcWeb/qianfu/4_2.png") no-repeat
            right top;
          right: 0;
          top: 0;
        }
        &.square3 {
          background: url($PIC_URL + "/tlbypcWeb/qianfu/4_3.png") no-repeat left
            bottom;
          left: 0;
          bottom: 0;
        }
        &.square4 {
          background: url($PIC_URL + "/tlbypcWeb/qianfu/4_4.png") no-repeat
            right bottom -1px;
          right: 0;
          bottom: 0;
        }
      }
      .infoTxt {
        background: #061231;
        border: 1px solid #0f264e;
        margin: 14px 0 18px;
        position: relative;
        .actierTitle {
          font-size: 18px;
          font-weight: bold;
          color: #ff8a00;
          line-height: 28px;
          text-align: center;
          margin: 15px 0 8px;
        }
        .Time {
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          color: #bcbfc4;
        }

        .txt {
          padding: 16px 25px;
          box-sizing: border-box;
          text-align: justify;
          font-size: 16px;
          height: 119px;
          overflow-y: auto;
          color: #3bacdb;
          font-weight: 400;
          line-height: 26px;
        }
        .btn {
          margin: 10px auto;
          width: 206px;
          height: 46px;
          cursor: pointer;
          background: url($PIC_URL + "/tlbypcWeb/qianfu/btn.png") no-repeat top
            center;
        }
      }
      .noMore {
        text-align: center;
        line-height: 70px;
        color: #3bacdb;
        font-size: 16px;
      }
      .plate {
        position: relative;
        min-height: 70px;
        background: #061231;
        border: 1px solid #0f264e;
        margin: 14px 0 18px;
      }
      .stock {
        position: relative;
        min-height: 70px;
        background: #061231;
        border: 1px solid #0f264e;
        margin-top: 14px;
      }
      table {
        width: 100%;
        text-align: center;
        line-height: 25px;
        font-size: 16px;
        font-weight: 400;
        margin: 5px 0;
        thead {
          color: #2a81ad;
        }
        tr {
          td {
            &:first-child {
              text-align: left;
              padding-left: 16px;
            }
            &:last-child {
              text-align: right;
              padding-right: 16px;
            }
          }
        }
        tbody {
          color: #3bacdb;
          tr {
            cursor: pointer;
            &:hover {
              background: #112761;
            }
          }
        }
      }
    }
  }
}
.plate-header {
  display: flex;
  width: 100%;
  .name {
    width: 20%;
  }
}
// 搜索
.seachBg {
  position: fixed;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 4;
  margin: auto;
  .searchPop {
    background: url($PIC_URL + "/tlbypcWeb/qianfu/tc_bg.png") no-repeat top
      center;
    width: 668px;
    max-width: 668px;
    height: 720px;
    position: absolute;
    top: 90px;
    padding: 32px 26px 30px 20px;
    background-size: 100% 100%;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    .icon-close {
      position: absolute;
      right: -53px;
      top: -42px;
      width: 40px;
      height: 40px;
      display: inline-block;
      background: url($PIC_URL + "/tlbypcWeb/qianfu/x.png") no-repeat center;
      cursor: pointer;
      z-index: 10;
    }

    .square {
      position: absolute;
      display: inline-block;
      width: 11px;
      height: 11px;
      &.square1 {
        background: url($PIC_URL + "/tlbypcWeb/qianfu/1.png") no-repeat left top;

        left: 0;
        top: 0;
      }
      &.square2 {
        background: url($PIC_URL + "/tlbypcWeb/qianfu/2.png") no-repeat right
          top;
        right: 0;
        top: 0;
      }
      &.square3 {
        background: url($PIC_URL + "/tlbypcWeb/qianfu/3.png") no-repeat left
          bottom;
        left: 0;
        bottom: 0;
      }
      &.square4 {
        background: url($PIC_URL + "/tlbypcWeb/qianfu/4.png") no-repeat right
          bottom -1px;
        right: 0;
        bottom: 0;
      }
    }

    .infoWrap {
      width: 100%;
      padding-right: 23px;
      overflow-y: auto;
      clear: both;
      .hdline {
        width: 128px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        background: url($PIC_URL + "/tlbypcWeb/qianfu/title_bg.png") no-repeat
          center;
        font-size: 20px;
        color: #3bacdb;
        font-weight: bold;
      }

      .square {
        position: absolute;
        display: inline-block;
        width: 11px;
        height: 11px;
        &.square1 {
          background: url($PIC_URL + "/tlbypcWeb/qianfu/4_1.png") no-repeat left
            top;
          left: 0;
          top: 0;
        }
        &.square2 {
          background: url($PIC_URL + "/tlbypcWeb/qianfu/4_2.png") no-repeat
            right top;
          right: 0;
          top: 0;
        }
        &.square3 {
          background: url($PIC_URL + "/tlbypcWeb/qianfu/4_3.png") no-repeat left
            bottom;
          left: 0;
          bottom: 0;
        }
        &.square4 {
          background: url($PIC_URL + "/tlbypcWeb/qianfu/4_4.png") no-repeat
            right bottom -1px;
          right: 0;
          bottom: 0;
        }
      }
      .infoTxt {
        background: #061231;
        border: 1px solid #0f264e;
        margin: 14px 0 18px;
        position: relative;
        .actierTitle {
          font-size: 18px;
          font-weight: bold;
          color: #ff8a00;
          line-height: 28px;
          text-align: center;
          margin: 15px 0 8px;
        }
        .Time {
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          color: #bcbfc4;
        }

        .txt {
          padding: 16px 25px;
          box-sizing: border-box;
          text-align: justify;
          font-size: 16px;
          height: 119px;
          overflow-y: auto;
          color: #3bacdb;
          font-weight: 400;
          line-height: 26px;
        }
        .btn {
          margin: 10px auto;
          width: 206px;
          height: 46px;
          cursor: pointer;
          background: url($PIC_URL + "/tlbypcWeb/qianfu/btn.png") no-repeat top
            center;
        }
      }
      .noMore {
        text-align: center;
        line-height: 70px;
        color: #3bacdb;
        font-size: 16px;
      }
      .plate {
        position: relative;
        min-height: 70px;
        background: #061231;
        border: 1px solid #0f264e;
        margin: 14px 0 18px;
      }
      .stock {
        position: relative;
        min-height: 70px;
        background: #061231;
        border: 1px solid #0f264e;
        margin-top: 14px;
      }
      table {
        width: 100%;
        text-align: center;
        line-height: 25px;
        font-size: 16px;
        font-weight: 400;
        margin: 5px 0;
        thead {
          color: #2a81ad;
        }
        tr {
          td {
            &:first-child {
              text-align: left;
              padding-left: 16px;
            }
            &:last-child {
              text-align: right;
              padding-right: 16px;
            }
          }
        }
        tbody {
          color: #3bacdb;
          tr {
            cursor: pointer;
            &:hover {
              background: #112761;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
/* 搜索 */
.searchBox .el-input__inner {
  width: 230px;
  height: 45px;
  background: #03051f;
  border: 1px solid #0f264e;
  border-radius: 23px;
  font-size: 18px;
  font-weight: 400;
  color: #cccccc;
  padding: 0 10px;
  box-sizing: border-box;
}
.el-input.is-active .el-input__inner,
.el-input__inner:focus,
.el-input__inner:hover {
  border: 1px solid #0f264e;
}
// btn搜索
.el-input__icon {
  color: #3bacdb;
  font-weight: bold;
  font-size: 28px;
  padding: 4px 8px;
}
.el-autocomplete-suggestion,
.popperCss .el-scrollbar {
  width: 220px;
  height: 219px;
  background: #03051f;
  border: 1px solid #0f264e;
  border-radius: 8px;
}
.el-autocomplete-suggestion {
  border: none;
}
.el-autocomplete-suggestion li {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ff8a00;
  border-bottom: 1px dashed #0f264e;
  padding: 2px 15px;
  box-sizing: border-box;
}
.el-autocomplete-suggestion li.highlighted,
.el-autocomplete-suggestion li:hover {
  background: #112761;
}
.popperCss .el-scrollbar__wrap {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
}
.popperCss .el-scrollbar__wrap::-webkit-scrollbar {
  background-color: #2657a5;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 10%);
  border-radius: 4px;
}
.popperCss .el-scrollbar__wrap::-webkit-scrollbar-track {
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0;
  background-color: #19396c;
}
.el-popper[x-placement^="bottom"] .popper__arrow {
  display: none;
}
</style>
